<template>
  <div>
    <!-- 讲师详情 -->
    <div class="teacherbanner">
      <div style="display: inline-table;width: 45%;margin-left: 0.2%;height: 28.75rem;">
        <img :src="this.eduteacher.avatar" style="width: 100%;height: 28.75rem;;"/>
      </div>
      <div style="display:inline-table;width: 53%;">
        <div style="display: inline-block;">
          <i class="el-icon-s-check"></i>{{eduteacher.name}}
        </div>
        <div style="display: inline-block;margin-left: 1.25rem;">
          <i class="el-icon-s-flag"></i>{{eduteacher.career}}
        </div>
        <p>
          <br>
          &nbsp;&nbsp;&nbsp;&nbsp;
          {{eduteacher.intro}}
        </p>

      </div>

    </div>
    <!-- 讲师的内容菜单 -->
    <div class="teacherinfocontent">
      <el-tabs class="eltabpane" v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="课程">
            <!-- 这个讲师的所有课程 -->
            <el-empty v-show="this.educourses.length==0?true:false" description="课程空空如也"></el-empty>
            <div class="thisteachercourseboxmargin">
              <div class="thisteachercourseboxout" v-for="course in educourses">
                <div class="thisteachercoursebox">
                  <img class="thisteachercourseimg" :src="course.cover"/>
                  <div style="height: 6.25rem;">
                    <span style="background-color:goldenrod;">精品课程</span>
                    <br>
                    <span style="font-weight: bold;">{{course.title}}</span>
                  </div>
                  <div style="font-size: smaller;">
                    <span v-show="course.courseStarttime!=null?true:false">{{course.courseStarttime}}至</span><span v-show="course.courseEndtime!=null?true:false">{{course.courseEndtime}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <!-- <span style="margin-bottom: 0rem;">报名人数</span> -->
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="社区">配置管理</el-tab-pane>
          <el-tab-pane label="评论">角色管理</el-tab-pane>
        </el-tabs>
    </div>
  </div>
</template>

<script>
import teacher from '@/api/edu/teacher/teacher'
export default{
  data(){
    return {
      educourses:{},
      eduteacher:{}
    }
  },
  created(){
    this.getinfoofthisteacher(this.$route.params.id)
  },
  methods:{
    //获取讲师基本信息和课程信息
    getinfoofthisteacher(id){
      teacher.getteacherinfomap(id).then(response => {
        this.educourses=response.data.data.teacherinfo.eduCourses
        this.eduteacher=response.data.data.teacherinfo.eduTeacher
        console.log('测试讲师的课程和基本信息：',this.educourses)
      })
    }
  }
}
</script>

<style>
  .thisteachercourseimg{
    width: 100%;height: 20.5rem;
    transform-style: preserve-3d;
    transition: all 1.5s;
  }
  .thisteachercourseimg:hover{
    ransform: rotateY(360deg);
      -webkit-transform: rotateY(360deg);
      -moz-transform: rotateY(360deg);
      -o-transform: rotateY(360deg);
      -ms-transform: rotateY(360deg);
  }
  .thisteachercourseboxout{
    display: inline-table;
    width: 20%;
    height: 24rem;
    margin-top: 2rem;
  }
  .thisteachercoursebox{
    width: 90%;
    height: 98%;
    background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
    margin-left: 5.3%;
  }
  .eltabpane{
    margin-top: 0.25rem;
    background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
  }
  .teacherinfocontent{
    margin-left: 0.2%;
  }
  .teacherbanner{
    background: linear-gradient(to bottom, #D5DEE7 0%, #E8EBF2 50%, #E2E7ED 100%), linear-gradient(to bottom, rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.02) 61%, rgba(0,0,0,0.02) 73%), linear-gradient(33deg, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
     background-blend-mode: normal,color-burn;
  }
</style>
